<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>丁丁麻将 - <?= $product['ProductName']?></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="apple-touch-icon" href="../../../images/favicon.ico" />
    <link rel="icon" href="../../../images/favicon.ico" />
    <link rel="stylesheet" href="../../../css/weuix.min.css" type="text/css" />
    <link rel="stylesheet" href="../../../css/custom.css" type="text/css" />
    <script src="../../../js/zepto.min.js" type="text/javascript"></script>
    <script src="../../../js/php.js" type="text/javascript"></script>

    <style type="text/css">
        .page-bg {
            background: url(../../../images/pgbg.jpg) no-repeat center center;
            background-size: 100% 100%;
            padding: 0 10px;
        }

        img.cell_img {
            background: #EEE url(../../../images/minibg.jpg) no-repeat center center;
            background-size: 100% 100%;
            border: 0 none;
            border-radius: 5px;
            box-shadow: 4px 4px 8px rgba(0,0,0,.5);
            margin: 0;
        }

        .weui-form-preview {
            border: 0 none;
            box-shadow: 0 0 8px 4px rgba(0,0,0,.21);
            padding-left: 15px;
            padding-right: 15px;
        }

        .weui-form-preview-btn-primary::after {
            border-left: 0 none;
        }

        .weui_input {
            text-align: right;
        }

        .weui-form-preview-btn .icon, .weui_dialog_ft .icon {
            font-size: 18px;
        }
    </style>

</head>
<body ontouchstart class="page-bg">

<div class="weui_msg">
    <div class="weui_icon_area"><img src="<?= urldecode($product['ProductImages'])?>" alt="<?= $product['ProductName']?>" class="cell_img"></div>
    <div class="weui_text_area">
        <h2 class="weui_msg_title"><?= $product['ProductName']?></h2>
        <p class="weui_msg_desc">
            请核对礼包和帐号信息，购买请阅读&nbsp;
            <a href="javascript:;" id="notice">《购买须知》</a>
        </p>
    </div>
    <div class="weui-form-preview">
        <div class="weui-form-preview-hd">
            <label class="weui-form-preview-label">付款金额</label>
            <em class="weui-form-preview-value f-red">&#165;<?= $product['Amount']?></em>
        </div>
        <div class="weui-form-preview-bd">
            <p>
                <label class="weui-form-preview-label">玩家</label>
                <span class="weui-form-preview-value">
                    <?php if (empty($playtbl)):?>
                    <input class="weui_input" type="text" name="UserId" placeholder="请输入帐号ID" maxlength="10" />
                    <?php else:?>
                        <?= $playtbl->PlayerName?> 〔<?= $playtbl->PlayerID?>〕
                    <?php endif;?>
                </span>
            </p>
            <p>
                <label class="weui-form-preview-label">礼包</label>
                <span class="weui-form-preview-value"><?= $product['ProductName']?></span>
            </p>
            <p>
                <label class="weui-form-preview-label">数量</label>
                <span class="weui-form-preview-value"><font class="f-green">+<?= $product['NumCount']+$product['ExtraCount']?><font class="f-orange">〔已含赠送〕</font></font></span>
            </p>
        </div>
        <div class="weui-form-preview-ft">
            <input type="hidden" name="productId" value="<?= $product['ProductId']?>" />
            <input type="hidden" name="openid" value="<?= $openid?>" />
            <?php if (!empty($playtbl)):?>
                <input type="hidden" name="UserId" value="<?= $playtbl->PlayerID?>" />
            <?php endif;?>
            <a class="weui-form-preview-btn weui-form-preview-btn-primary" id="button-pay" href="javascript:"><i class="icon icon-71"></i>&nbsp;确认购买</a>
        </div>
    </div>
</div>
<div class="weui-footer weui-footer-fixed-bottom">
    <p class="weui-footer-links">
        <a href="javascript:;" class="weui-footer-link">武汉百游网络科技有限公司</a>
    </p>
    <p class="weui-footer__text">Copyright &copy; <script>
            document.write(new Date().getFullYear())
        </script> baiyouyx.com</p>
</div>

<div class="weui-share" id="share_buy" onclick="$(this).fadeOut();$(this).removeClass('fadeOut')">
    <div class="weui-share-box">
        可以尝试将此页面分享给朋友帮你付款充值！<i></i>
    </div>
</div>
<!-- div class="weui-share" id="share_weixin">
    <div class="weui-share-box">
        点击右上角请使用手机浏览器打开继续操作！<i></i>
    </div>
</div -->

<div id="preloader">
    <div class="loading">
        <div class="dot white"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</div>
<script src="../../../js/fastclick.js" type="text/javascript"></script>
<script type="text/javascript">
    document.onreadystatechange = function () {
        if (document.readyState == "complete") {
            $("#preloader>.loading").fadeOut("slow", function () {
                $("#preloader").fadeOut("slow");
            });
        }
        setTimeout(function () {
            if ($(".loading,#preloader").is(":hidden") === false) {
                $("#preloader>.loading").fadeOut("slow", function () {
                    $("#preloader").fadeOut("slow");
                });
            }
        }, 5000);
    }
    var ua = browser.version;
    var _width = parseInt(window.screen.width);
    var scale = _width / 480;
    if (ua.android) {
        scale = scale > 1.0 ? 0.8 : scale;
        $("meta[name='viewport']").attr("content", "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no")
    }
    FormatMoney = function (num) {
        num = num.toString().replace(/\$|\,/g, '');
        if (isNaN(num)) num = "0";
        sign = (num == (num = Math.abs(num)));
        num = Math.floor(num * 100 + 0.50000000001);
        cents = num % 100;
        num = Math.floor(num / 100).toString();
        if (cents < 10) cents = "0" + cents;
        for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3) ; i++)
            num = num.substring(0, num.length - (4 * i + 3)) + ',' +
                num.substring(num.length - (4 * i + 3));
        return '¥' + (((sign) ? '' : '-') + num + '.' + cents);
    }
    $(function () {
        FastClick.attach(document.body);
        if (window.localStorage) {
            var fst = window.localStorage.getItem("fst");
            if (!fst) {
                window.localStorage.setItem("fst", "ok");
                $('#share_buy').show();
            }
        }
    });
</script>

<script type="text/javascript">
    $(function () {
        if (ua.weixin) {
            $('#share_weixin').show()
        }
        var pass = false;
        var put = $("input[name='UserId']");
        $(document).on("keyup blur", "input[name='UserId']", function () {
            var playerid = strtrim($(this).val());
            if (playerid.length !== 5) {
                pass = false;
                $.toptips("请输入5位有效数字格式的游戏帐号！");
                put.focus();
                return false;
            }
            if (!(is_num(playerid))) {
                pass = false;
                $.toptips("输入的游戏帐号ID格式错误！");
                put.focus();
                return false;
            }
            $.ajax({
                type: 'get',
                url: '/shopping-mall/isplayer?id=' + playerid,
                beforeSend: function () {
                    $.showLoading();
                },
                complete: function () {
                    $.hideLoading();
                },
                dataType: 'json',
                success: function (d) {
                    if (d.statusCode === 200) {
                        pass = true;
                        return true;
                    }
                    pass = false;
                    $.toptips("当前输入的游戏帐号不存在!");
                    return false;
                },
                error: function (err) {
                    console.log(err);
                }
            });
        });
        $(document).on("click", "#notice", function () {
            $.alert("<p class='xy'>1、请仔细核对购买商品金额数量再付款；<br />2、如若帐号有额外奖励资格则数量已包含；<br />3、此为虚拟商品一旦购买不支持退款服务；<br />4、付款成功后虚拟商品将直接到帐游戏；<br/>5、本产品仅供娱乐，如有非法用途与本公司无关，一切法律责任自负！<br/>6、倘若充值出现延时超过<font class='f-red f16'>5分钟</font>未到账，请致电<i class='f-green f16'>18986995550</i>。</p>", "※购买须知※");
        });
        $(document).on("click", "#button-pay", function () {
            var playerid = strtrim(put.val());
            if (playerid.length !== 5) {//playerid.length !== 5 || !pass
                $.toptips("请输入5位有效数字格式的游戏帐号！");
                put.focus();
                return false;
            }
            if (!(is_num(playerid))) {
                $.toptips("输入的游戏帐号ID格式错误！");
                put.focus();
                return false;
            }
            var productId = strtrim($("[name='productId']").val());
            var _openId = strtrim($("[name='openid']").val());
            if (typeof (_openId) !== "undefined" && _openId.length > 0) {
                $.ajax({
                    type: 'post',
                    url: '/pay/order-builder',
                    data: {
                        UserId: playerid,
                        ProductId: productId,
                        ClientId: (ua.android ? 0 : (ua.ios ? 1 : 2)),
                        ClassId: 4,
                        OpenId: _openId
                    },
                    dataType: 'json',
                    success: function (d) {
                        if (d.statusCode === 200) {
                            var _CONF = JSON.parse(d.message);
                            if (typeof WeixinJSBridge == "undefined") {
                                if (document.addEventListener) {
                                    document.addEventListener('WeixinJSBridgeReady', function () {
                                        onBridgeReady(_CONF);
                                    }, false);
                                } else if (document.attachEvent) {
                                    document.attachEvent('WeixinJSBridgeReady', function () {
                                        onBridgeReady(_CONF);
                                    });
                                    document.attachEvent('onWeixinJSBridgeReady', function () {
                                        onBridgeReady(_CONF);
                                    });
                                }
                            } else {
                                onBridgeReady(_CONF);
                            }
                            function onBridgeReady(_CONF) {
                                WeixinJSBridge.invoke('getBrandWCPayRequest', {
                                    "appId": _CONF.appId,
                                    "timeStamp": _CONF.timeStamp,
                                    "nonceStr": _CONF.nonceStr,
                                    "package": _CONF.package,
                                    "signType": _CONF.signType,
                                    "paySign": _CONF.paySign
                                }, function (res) {
                                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                                        $.toast("支付成功！");
                                        window.location.href = "/pay/return-result-url/?out_trade_no=" + _CONF.out_trade_no;
                                    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                        $.toast("支付取消！", "cancel");
                                    } else {
                                        $.toast("支付失败", "forbidden");
                                    }
                                });
                            }
                            return false;
                        }
                        $.alert(d.message);
                        $.hideLoading();
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            }else {
                $.modal({
                    title: "选择付款方式",
                    text: "已确认购买礼包后请选择付款方式",
                    buttons: [{
                        text: "<i class='icon icon-11'></i>&nbsp;支付宝",
                        className: "f-blue",
                        onClick: function () {
                            $.showLoading();
                            orderFunc(1, playerid, productId);
                        }
                    }, {
                        text: "<i class='icon icon-14'></i>&nbsp;微信支付",
                        className: "f-green",
                        onClick: function () {
                            $.showLoading();
                            orderFunc(0, playerid, productId);
                        }
                    },
                    //     {
                    //     text: "<i class='icon icon-73'></i>&nbsp;取消购买",
                    //     className: "f-orange"
                    // }
                    ]
                });
            }

            function orderFunc(t, u, p) {
                $.ajax({
                    type: 'post',
                    url: '/pay/order-builder/',
                    data: {
                        UserId: u,
                        ProductId: p,
                        ClientId: (ua.android ? 0 : (ua.ios ? 1 : 2)),
                        ClassId: t,
                        OpenId:null
                    },
                    dataType: 'json',
                    success: function (d) {
                        if (d.statusCode === 200) {
                            if (t == 0) {
                                window.location = d.message;
                            } else {
                                $("body").prepend(d.message);
                            }
                            return false;
                        }
                        $.alert(d.message);
                        $.hideLoading();
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            }
        });
    });
</script>

</body>
</html>
